<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="船舶ID" prop="ShipID">
        <el-input
          v-model="queryParams.ShipID"
          placeholder="请输入船舶ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['system:ship:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:ship:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:ship:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['system:ship:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="shipList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="船舶ID" align="center" prop="ShipID" />
      <el-table-column label="来源" align="center" prop="Fromin" />
      <el-table-column label="海上移动服务标识码" align="center" prop="mmsi" />
      <el-table-column label="船舶类型" align="center" prop="shiptype" />
      <el-table-column label="国际海事组织的船舶识别码" align="center" prop="imo" />
      <el-table-column label="船舶名称" align="center" prop="name" />
      <el-table-column label="船舶呼号" align="center" prop="callsign" />
      <el-table-column label="船舶长度" align="center" prop="length" />
      <el-table-column label="船舶宽度" align="center" prop="width" />
      <el-table-column label="左舷距离" align="center" prop="left" />
      <el-table-column label="尾距" align="center" prop="trail" />
      <el-table-column label="船舶吃水深度" align="center" prop="draught" />
      <el-table-column label="目的地" align="center" prop="dest" />
      <el-table-column label="标准化后的目的地" align="center" prop="destStd" />
      <el-table-column label="目的港口代码" align="center" prop="destcode" />
      <el-table-column label="预计到达时间" align="center" prop="eta" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.eta, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标准化后的预计到达时间" align="center" prop="etaStd" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.etaStd, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="航行状态标识" align="center" prop="navistat" />
      <el-table-column label="纬度" align="center" prop="lat" />
      <el-table-column label="经度" align="center" prop="lon" />
      <el-table-column label="速度" align="center" prop="sog" />
      <el-table-column label="船迹向" align="center" prop="cog" />
      <el-table-column label="船首向" align="center" prop="hdg" />
      <el-table-column label="转向率" align="center" prop="rot" />
      <el-table-column label="数据更新时间的时间戳" align="center" prop="lasttime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:ship:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:ship:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model="queryParams.pageNum"

      @pagination="getList"
    />

    <!-- 添加或修改船位管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="shipRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="船舶ID" prop="ShipID">
          <el-input v-model="form.ShipID" placeholder="请输入船舶ID" />
        </el-form-item>
        <el-form-item label="来源" prop="Fromin">
          <el-input v-model="form.Fromin" placeholder="请输入来源" />
        </el-form-item>
        <el-form-item label="海上移动服务标识码" prop="mmsi">
          <el-input v-model="form.mmsi" placeholder="请输入海上移动服务标识码" />
        </el-form-item>
        <el-form-item label="国际海事组织的船舶识别码" prop="imo">
          <el-input v-model="form.imo" placeholder="请输入国际海事组织的船舶识别码" />
        </el-form-item>
        <el-form-item label="船舶名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入船舶名称" />
        </el-form-item>
        <el-form-item label="船舶呼号" prop="callsign">
          <el-input v-model="form.callsign" placeholder="请输入船舶呼号" />
        </el-form-item>
        <el-form-item label="船舶长度" prop="length">
          <el-input v-model="form.length" placeholder="请输入船舶长度" />
        </el-form-item>
        <el-form-item label="船舶宽度" prop="width">
          <el-input v-model="form.width" placeholder="请输入船舶宽度" />
        </el-form-item>
        <el-form-item label="左舷距离" prop="left">
          <el-input v-model="form.left" placeholder="请输入左舷距离" />
        </el-form-item>
        <el-form-item label="尾距" prop="trail">
          <el-input v-model="form.trail" placeholder="请输入尾距" />
        </el-form-item>
        <el-form-item label="船舶吃水深度" prop="draught">
          <el-input v-model="form.draught" placeholder="请输入船舶吃水深度" />
        </el-form-item>
        <el-form-item label="目的地" prop="dest">
          <el-input v-model="form.dest" placeholder="请输入目的地" />
        </el-form-item>
        <el-form-item label="标准化后的目的地" prop="destStd">
          <el-input v-model="form.destStd" placeholder="请输入标准化后的目的地" />
        </el-form-item>
        <el-form-item label="目的港口代码" prop="destcode">
          <el-input v-model="form.destcode" placeholder="请输入目的港口代码" />
        </el-form-item>
        <el-form-item label="预计到达时间" prop="eta">
          <el-date-picker clearable
                          v-model="form.eta"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择预计到达时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="标准化后的预计到达时间" prop="etaStd">
          <el-date-picker clearable
                          v-model="form.etaStd"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择标准化后的预计到达时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="航行状态标识" prop="navistat">
          <el-input v-model="form.navistat" placeholder="请输入航行状态标识" />
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input v-model="form.lat" placeholder="请输入纬度" />
        </el-form-item>
        <el-form-item label="经度" prop="lon">
          <el-input v-model="form.lon" placeholder="请输入经度" />
        </el-form-item>
        <el-form-item label="速度" prop="sog">
          <el-input v-model="form.sog" placeholder="请输入速度" />
        </el-form-item>
        <el-form-item label="船迹向" prop="cog">
          <el-input v-model="form.cog" placeholder="请输入船迹向" />
        </el-form-item>
        <el-form-item label="船首向" prop="hdg">
          <el-input v-model="form.hdg" placeholder="请输入船首向" />
        </el-form-item>
        <el-form-item label="转向率" prop="rot">
          <el-input v-model="form.rot" placeholder="请输入转向率" />
        </el-form-item>
        <el-form-item label="数据更新时间的时间戳" prop="lasttime">
          <el-input v-model="form.lasttime" placeholder="请输入数据更新时间的时间戳" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { listShip, getSingleShip, getShip, delShip, addShip, updateShip } from "@/api/system/ship";

export default {
  data() {
    return {
      shipList: [],
      open: false,
      loading: true,
      showSearch: true,
      ids: [],
      single: true,
      multiple: true,
      total: 0,
      title: "",
      form: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ShipID: null,
      },
      rules: {
        ShipID: [
          { required: true, message: "船舶ID不能为空", trigger: "blur" }
        ],
        Fromin: [
          { required: false, message: "来源不能为空", trigger: "blur" }
        ],
        mmsi: [
          { required: true, message: "海上移动服务标识码不能为空", trigger: "blur" }
        ],
        shiptype: [
          { required: false, message: "船舶类型不能为空", trigger: "change" }
        ],
        imo: [
          { required: false, message: "国际海事组织的船舶识别码不能为空", trigger: "blur" }
        ],
        name: [
          { required: false, message: "船舶名称不能为空", trigger: "blur" }
        ],
        callsign: [
          { required: false, message: "船舶呼号不能为空", trigger: "blur" }
        ],
        length: [
          { required: false, message: "船舶长度不能为空", trigger: "blur" }
        ],
        width: [
          { required: false, message: "船舶宽度不能为空", trigger: "blur" }
        ],
        left: [
          { required: false, message: "左舷距离不能为空", trigger: "blur" }
        ],
        trail: [
          { required: false, message: "尾距不能为空", trigger: "blur" }
        ],
        draught: [
          { required: false, message: "船舶吃水深度不能为空", trigger: "blur" }
        ],
        dest: [
          { required: false, message: "目的地不能为空", trigger: "blur" }
        ],
        destStd: [
          { required: false, message: "标准化后的目的地不能为空", trigger: "blur" }
        ],
        destcode: [
          { required: false, message: "目的港口代码不能为空", trigger: "blur" }
        ],
        eta: [
          { required: false, message: "预计到达时间不能为空", trigger: "blur" }
        ],
        etaStd: [
          { required: false, message: "标准化后的预计到达时间不能为空", trigger: "blur" }
        ],
        navistat: [
          { required: false, message: "航行状态标识不能为空", trigger: "blur" }
        ],
        lat: [
          { required: false, message: "纬度不能为空", trigger: "blur" }
        ],
        lon: [
          { required: false, message: "经度不能为空", trigger: "blur" }
        ],
        sog: [
          { required: false, message: "速度不能为空", trigger: "blur" }
        ],
        cog: [
          { required: false, message: "船迹向不能为空", trigger: "blur" }
        ],
        hdg: [
          { required: false, message: "船首向不能为空", trigger: "blur" }
        ],
        rot: [
          { required: false, message: "转向率不能为空", trigger: "blur" }
        ],
        lasttime: [
          { required: false, message: "数据更新时间的时间戳不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    /** 查询单船信息 */
    getSingleShipInfo() {
      this.loading = true;
      getSingleShip(this.queryParams.ShipID).then(response => {
        this.form = response.data;
        this.shipList = [response.data]; // 仅展示单船信息
        this.total = 1;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    /** 查询船位管理列表 */
    getList() {
      this.loading = true;
      listShip(this.queryParams).then(response => {
        this.shipList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        ShipID: null,
        Fromin: null,
        mmsi: null,
        shiptype: null,
        imo: null,
        name: null,
        callsign: null,
        length: null,
        width: null,
        left: null,
        trail: null,
        draught: null,
        dest: null,
        destStd: null,
        destcode: null,
        eta: null,
        etaStd: null,
        navistat: null,
        lat: null,
        lon: null,
        sog: null,
        cog: null,
        hdg: null,
        rot: null,
        lasttime: null
      };
      if (this.$refs.shipRef) {
        this.$refs.shipRef.resetFields();
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.ShipID) {
        this.getSingleShipInfo(); // 查询单船
      } else {
        this.queryParams.pageNum = 1;
        this.getList(); // 查询多个船舶
      }
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryRef.resetFields();
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ShipID);
      this.single = selection.length !== 1;
      this.multiple = selection.length === 0;
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.reset();
      this.title = "添加船位管理";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      const _ShipID = row.ShipID || this.ids;
      this.open = true; // 先打开对话框
      this.reset(); // 重置表单
      getShip(_ShipID).then(response => {
        this.form = response.data;
        this.title = "修改船位管理";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs.shipRef.validate(valid => {
        if (valid) {
          if (this.form.ShipID != null) {
            updateShip(this.form).then(response => {
              this.$message.success("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addShip(this.form).then(response => {
              this.$message.success("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const _ShipIDs = row.ShipID || this.ids;
      this.$confirm(`是否确认删除船位管理编号为"${_ShipIDs}"的数据项？`)
        .then(() => {
          return delShip(_ShipIDs);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$download('system/ship/export', {
        ...this.queryParams
      }, `ship_${new Date().getTime()}.xlsx`);
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
</style>

